<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>牧心农业</title>
    <link rel="stylesheet" type="text/css" href="/static/css/eui.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/mobile.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/iconfont.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/swipe.js"></script>
    <script src="/static/js/doT.min.js"></script>
    <script src="/static/js/func.js"></script>
</head>
<body>
    <div class="content margin_top_foot">
        <header class="header fixed_top bg_mx_green"></header>
        <div class="swipe">
            <div class='swipe-wrap'></div>
            <ul class="position"></ul>
        </div>
        <div class="detail bg_white"></div>
        <footer class="fixed_bottom bg_mx_green font_16 text_center lineheight_50" onclick="goraising()">立即认养</footer>
        <form class="fixed all bg_dark raising_mask hide">
            <div class="raising_confirm">
                <div class="padding_15 confirm_number bg_white"></div>
                <button class="all_width btn btn_mx_green font_16 text_center lineheight_50">下一步</button>
            </div>
        </form>
    </div>
    <div class="toast"></div>
    <!-- toast模版 -->
    <script type="text/template" charset="utf-8" id='toast_template'>
        <i class="iconfont icon-toast{{=it.icon}}"></i>
        <div class="toast_text">{{=it.text}}</div>
    </script>
    <script type="text/template" charset="utf-8" id='swipe_template'></script>
    <script type="text/template" charset="utf-8" id='number_template'>
        <div class="padding_v_15 flex border_b">
            <div class="width_100">
                <img src="{{=it.img}}" alt="">
            </div>
            <div class="left_100 padding_l_15 font_12">
                <div class="">{{=it.title}}</div>
                <div class="">品种：{{=it.vname}}</div>
                <div class="">代养农户：{{=it.farmer}}</div>
                <div class="">批次：{{=it.batch}}</div>
            </div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">姓名</div>
            <div class="left_70">
                <input type="text" name="name" placeholder="请输入姓名" request title="姓名">
            </div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">手机号</div>
            <div class="left_70">
                <input type="text" name="tel" placeholder="请输入手机号" request title="手机号" data-pattern="^(0|86|17951)?(13\d|15[0-35-9]|17[678]|18\d|14[57])\d{8}$" data-tips="11位手机号">
            </div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">备注</div>
            <div class="left_70">
                <textarea name="remark" placeholder="请输入备注"></textarea>
            </div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">是否同意</div>
            <div class="left_70">
                <input class="checkbox" type="checkbox" request title="必须确认并同意认养协议" name="xieyi" id=""><a href="<{url route='/shop/rasing/xieyi'}>">《<{$article['title']}>》</a><a href="<{url route='/shop/rasing/down-load'}>">下载</a>
            </div>
        </div>

        <input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
        <input type="hidden" name="pigid" value="<{$id}>">
    </script>
    <script type="text/template" charset="utf-8" id='detail_template'>
        <div class="border_b padding_h_15">
            <div class="lineheight_4 border_b">{{=it.title}}</div>
            <div class="v_center light padding_v_15">
                <div class="flex_1 lineheight_2">
                    <div class="">品种：{{=it.vname}}</div>
                    <div class="">代养农户：{{=it.farmer}}</div>
                    <div class="">批次：{{=it.batch}}</div>
                </div>
                <div class="flex_1 all_height text_center">
                    <div class="border_warning block_80 block_center circle relative row" style="background-image: -webkit-linear-gradient(to bottom,#fff {{=(1-it.ratio)*100}}%,#ffc107 {{=(1-it.ratio)*100}}%);background-image: linear-gradient(to bottom,#fff {{=(1-it.ratio)*100}}%,#ffc107 {{=(1-it.ratio)*100}}%);">
                        <span class="font_18">{{=it.ratio*100}}%</span>
                        <div class="font_12 raising_left">剩余{{=it.leftnum}}天</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lineheight_1 flex text_center padding_v_10 border_b">
            <div class="flex_1 mx_green detail_nav" for=".detail_info">品种介绍</div>
            <div class="flex_1 border_l detail_nav" for=".history">仔猪档案</div>
            <div class="flex_1 border_l detail_nav" for=".records">成长记录</div>
        </div>
        <div class="padding_15">
            <div class="detail_info text_indent">{{=it.info}}</div>
            <div class="history row hide">
                <div class="pull_left padding_r_10">猪场合同编号：{{=it.contract_no}}</div>
                <div class="pull_left padding_r_10">猪场：{{=it.slaughterhouse}}</div>
                <div class="pull_left">批次：{{=it.no}}</div>
                <div class="pull_left">代养地址：{{=it.address}}</div>
                <div class="pull_left flex_row_2">
                    <div class="row_one">
                        <div class="">父本编号:{{=it.f_no}}</div>
                        <img src="{{=it.f_img}}" alt="">
                    </div>
                    <div class="row_one">
                        <div class="">母本编号:{{=it.m_no}}</div>
                        <img src="{{=it.m_img}}" alt="">
                    </div>
                </div>
            </div>
            <div class="records light hide">
                {{for(var i=0;i<it.records.length;i++){}}
                <div class="h_justify" onclick="location.href='{{=it.records[i].url}}'">
                    <div>{{=it.records[i].title}}</div>
                    <div>第{{=it.records[i].no}}次常规巡检</div>
                    <div>巡检人：{{=it.records[i].who}}</div>
                </div>
                {{}}}
            </div>
        </div>
    </script>
    <script>
        // 页面初始化
            //var banner = ["/static/images/from.jpg","/static/images/from.jpg","/static/images/from.jpg"]
            var banner = <{$banner}>;
            loadswipe(banner)
            //var detail = {title:"第28-2期黑山猪散养",period:"12个月",cost:5000,profit:900,ratio:0.45,leftnum:5,img:"/static/images/pig3.jpg",name:"牧心一号",info:'<p>位于柞水溶洞山下，周边环境优美，开门见山，空气清新。我们家有五间房子，房间设施整洁干净，有完整的卫浴设施。欢迎大家来我家游玩。详细介绍文字，后台可自定义编辑图文混排。</p><img src="/static/images/farmdetail.jpg" alt="">',contract_no:"",slaughterhouse:"",no:"",address:"",f_no:"",m_no:"",records:[{title:"于2017-06-02巡检",no:"1",who:"仔仔",url:""}]};
            var detail = <{$pig}>;
            var evaldetail = doT.template($("#detail_template").text());
            var evalnumber = doT.template($("#number_template").text());
            var evalToast = doT.template($("#toast_template").text());
            loaddata(".detail",evaldetail,detail);
            loaddata(".confirm_number",evalnumber,detail);
            $(".detail_nav").click(function(){
                $(this).addClass("mx_green").siblings().removeClass("mx_green");
                $($(this).attr("for")).show().siblings().hide()
            })
            loadheadbar("仔猪详情");
        // 去认领
            function goraising(){
                $(".raising_mask").show()
                $("body").addClass("row")
                $(window).on('touchmove', function (e) {
                    e.preventDefault();
                });
            }
            $(".raising_mask").click(function(e){
                if(e.target == this){
                    $(".raising_mask").hide()
                    $("body").removeClass("row")
                    $(window).unbind('touchmove');
                }
            })
        // 下一步
            var submited = false;
            $(".raising_mask").submit(function(e){
                e.preventDefault();
                with(this){
                    for (var i = 0; i < this.length; i++) {
                        if($(this[i]).attr("request")==""){
                            if(!checkone(this[i])){
                                return false;
                            }
                        }
                    }
                    if(submited) return false;
                    var data_submit = $(".raising_mask").serializeObject();console.log(data_submit)
                    $.post("/shop/order/rasing-pre-pay",data_submit,function(res){console.log(res);
                        toast("attention",res.msg);
                        if(res.status == 0){
                            submited = true;
                            location.href = res.url;
                        }
                    },"json")
                }
            })
    </script>
</body>
</html>
